<template>
	<view class="container">
		<view class="time-container">
			<text class="text">实时数据</text>
			<view class="time">
				<text>{{head}}~{{end}}</text>
				<u-icon name="calendar" color="#17CC77" size="28"></u-icon>
			</view>
		</view>
		<view class="list-contianer">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<u--image width="90rpx" height="90rpx" :src="item.icon"></u--image>
				<view class="text">
					{{item.ename}}:
					<text class="number">{{item.enum}}</text>
					<text class="unit">{{item.eunit}}</text>
				</view>
				<u-icon name="coupon" color="#17CC77" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {findWeatherAndCameraDataByLandId} from "@/api/api.js"
	export default {
		data() {
			return {
				head:"",
				end:'',
				list:[
					{
						icon:require("@/static/indexBg.png"),
						text:"数字气压",
						number:30,
						unit:"℃"
					},
					{
						icon:require("@/static/indexBg.png"),
						text:"数字气压",
						number:30,
						unit:"℃"
					},
				],
				landId:'',
				iconList:[
					// 风速:
					'http://grove.cpzsyun.com:81/icon/renyang/风速@2x.png',
					// 雨量:
					'http://grove.cpzsyun.com:81/icon/renyang/雨量@2x.png',
					 // 大气温度:
					'http://grove.cpzsyun.com:81/icon/renyang/大气温度@2x.png',
					// 雨量累计:
					'http://grove.cpzsyun.com:81/icon/renyang/雨量统计@2x.png',
					// 数字气压: 
					'http://grove.cpzsyun.com:81/icon/renyang/数字气压@2x.png',
					// 风向:
					'http://grove.cpzsyun.com:81/icon/renyang/风向@2x.png',
					// 大气湿度:
					'http://grove.cpzsyun.com:81/icon/renyang/大气湿度@2x.png',
					// // 土壤温度: 
					// 'http://grove.cpzsyun.com:81/icon/renyang/土壤温度@2x.png',
					// 光照度:
					'http://grove.cpzsyun.com:81/icon/renyang/照度@2x.png',
					// 土壤湿度:
					// 'http://grove.cpzsyun.com:81/icon/renyang/土壤湿度@2x.png',
					
					
					
					
					
					
					
				]
			};
		},
		onLoad(routerParams) {
			this.landId = routerParams.landId
			this.getData()
			this.head = new Date().toLocaleDateString()
			this.end = new Date().toLocaleDateString()
		},
		methods:{
			 async getData(){
				 uni.showLoading({
				 	mask:true,
				 })
				 let query = `landId=${this.landId}`
				const res = await findWeatherAndCameraDataByLandId(query)
				try{
					if(res?.data.code == 200){
						this.list = res.data.data
						this.list.forEach((item,index)=>{
							switch (item.ekey){
								case "e6":
								this.list.splice(index,1)
									break;
								case "e8":
								this.list.splice(index,1)
									break;
								case "e10":
								this.list.splice(index,1)
									break;	
							}
						})
						this.list.forEach((item,index)=>{
							item.icon = this.iconList[index]
						})
						uni.hideLoading()
						console.log(this.list);
					}else{
						uni.hideLoading()
						uni.$u.toast(res.data.msg)
					}
				}catch(e){
					//TODO handle the exception
					uni.hideLoading()
					uni.$u.toast(e)
					throw e
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: YouSheBiaoTiHei;
		src: url(http://grove.cpzsyun.com:81/icon/renyang/YouSheBiaoTiHei-2.ttf) format('truetype');
	}
.container{
	.time-container{
		display: flex;
		align-items: center;
		padding: 34rpx 30rpx 19rpx 30rpx;
		.text{
			width: 30%;
		}
		.time{
			width: 90%;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			text{
				margin-right: 50rpx;
			}
		}
		
	}
	.list-contianer{
		padding: 0 30rpx 99rpx 30rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		.list-item{
			display: flex;
			justify-content:space-between;
			align-items: center;
			padding: 16rpx;
			border-bottom: 1rpx solid #e5e5e590;
			.text{
				width: 60%;
			}
			.number{
				color: #17CC77;
				font-size: 38rpx;
				font-family: 'YouSheBiaoTiHei';
				color: #17CC77;
				line-height: 38rpx;
				letter-spacing: 3px;
			}
			.unit{
				color: #8C8C8C;
				font-weight: 500;
				font-family: PingFangSC, PingFang SC;
				font-size: 24rpx;
			}
		}
	}
}
</style>
